<template>
    <el-drawer v-model="drawer" title="操作记录" :draggable="true" :resizable="true">
        <el-form :model="form" :rules="rules" ref="userRef" label-width="80px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="用户姓名" prop="nickName">
                        <el-input v-model="form.nickName" placeholder="请输入用户姓名" maxlength="30" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="归属部门" prop="deptId">
                        <el-tree-select v-model="form.deptId" :data="deptOptions"
                            :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id"
                            placeholder="请选择归属部门" check-strictly />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="手机号码" prop="phonenumber">
                        <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item v-if="form.userId == undefined" label="登录账号" prop="userName">
                        <el-input v-model="form.userName" placeholder="请输入登录账号" maxlength="30" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
                        <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20"
                            show-password />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="用户性别">
                        <el-select v-model="form.sex" placeholder="请选择">
                            <el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label"
                                :value="dict.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="状态">
                        <el-radio-group v-model="form.status">
                            <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{
                                dict.label
                            }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="岗位">
                        <el-select v-model="form.postIds" multiple placeholder="请选择">
                            <el-option v-for="item in postOptions" :key="item.postId" :label="item.postName"
                                :value="item.postId" :disabled="item.status == 1"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="角色">
                        <el-select v-model="form.roleIds" multiple placeholder="请选择">
                            <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName"
                                :value="item.roleId" :disabled="item.status == 1"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="备注">
                        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script setup >
import { ref, watch } from 'vue'
import { queryBomInfo } from '../api'
const props = defineProps({
    title: {
        type: String,
        default: '操作记录'
    },
    url: {
        type: String,
        default: ''
    },
    fetchParams: {
        type: Object,
        default: () => ({})
    }
})
const tableData = ref([])
const drawer = ref(false)
/** 显示抽屉 */
const show = async (row) => {
    drawer.value = true;
    queryDetail(row)

}
const loading = ref(false)

const queryDetail = async (data) => {
    if (props.url) {
        loading.value = true
        const res = await queryBomInfo(data.id);
        if (res.code === 200) {
            loading.value = false
        }
    }
}
/** 提交按钮 */
function submitForm() {
    proxy.$refs["userRef"].validate(valid => {
        if (valid) {

        }
    });
};
/** 取消按钮 */
function cancel() {
    drawer.value = false;
};
defineExpose({
    show,
});
</script>

<style scoped></style>